<!--
 * @Author: byron
 * @Date: 2021-09-29 08:48:46
 * @LastEditTime: 2021-10-07 10:11:13
-->
<template>
    <div class="song-table">
        <el-table
            :data="tableData"
            style="width: 100%"
            :show-header="genHeader"
            empty-text=" "
            :stripe="isStripe"
        >
            <el-table-column type="index" width="70" align="center">
            </el-table-column>
            <el-table-column
                v-if="isShowImg"
                prop="img"
                width="100"
                align="center"
            >
                <template slot-scope="scope">
                    <span class="img-warp">
                        <img
                            v-lazy="
                                $utils.genImgURL(
                                    tableData[scope.$index].img,
                                    120
                                )
                            "
                            alt=""
                        />
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="音乐标题">
                <template slot-scope="scope">
                    <HighlightText
                        :text="scope.row.name"
                        :highlightText="highlightText"
                /></template>
            </el-table-column>
            <el-table-column prop="artistsText" label="歌手">
                <template slot-scope="scope">
                    <HighlightText
                        :text="scope.row.artistsText"
                        :highlightText="highlightText"
                /></template>
            </el-table-column>
            <el-table-column prop="albumName" label="专辑">
                <template slot-scope="scope">
                    <HighlightText
                        :text="scope.row.albumName"
                        :highlightText="highlightText"
                /></template>
            </el-table-column>
            <el-table-column prop="durationSecond" label="时长" width="80">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    props: {
        kind: {
            type: String,
            default: 'songs',
        },
        highlightText: {
            type: String,
        },
        tableData: {
            type: Array,
        },
        isStripe: {
            type: Boolean,
            default: false,
        },
        isShowImg: {
            type: Boolean,
            default: true,
        },
        showHeader: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        genHeader() {
            if (!this.showHeader || this.tableData.length == 0) return false

            return true
        },
    },
    created() {
        console.log(this.tableData)
        console.log(this.tableData)
    },
}
</script>
<style lang="scss" scoped>
.img-warp {
    display: inline-block;
    width: 60px;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>
